const fs = require('fs');
const Sass = require('sass');
const {getAppPath} = require('electron').remote.app;

module.exports = function(key, options) {
    let oldmounted = options.mounted;
    
    options.mounted = function(e) {
        window.$vueComponentStyles = window.$vueComponentStyles || {
            css:{}, scss:{}
        };
        
        if(this.$options.css && !window.$vueComponentStyles.css[key]) {
            window.$vueComponentStyles.css[key] = true;
            let style = document.createElement('style');
            style.setAttribute('type', 'text/css');
            style.setAttribute('component', key);
            let css = this.$options.css;
            
            css = css.trim().replace(/^<style\s*[^>]*>/i, '');
            css = css.replace(/<\/style>$/i, '');
            style.innerHTML = css.trim();
            
            document.body.append(style);
        }
        
        if(this.$options.scss && !window.$vueComponentStyles.scss[key]) {
            window.$vueComponentStyles.scss[key] = true;
            let style = document.createElement('style');
            style.setAttribute('type', 'text/css');
            style.setAttribute('source-type', 'scss');
            style.setAttribute('component', key);
            let scss = this.$options.scss;
    
            scss = scss.trim().replace(/^<style\s*[^>]*>/i, '');
            scss = scss.replace(/<\/style>$/i, '').trim();
            style.innerHTML = Sass.renderSync({data:scss}).css.toString();
            document.body.append(style);
        }
    
        oldmounted.apply(this, [e]);
    };
    
    Vue.component(key, options);
};
